<template>
    <div class="layout-container">
      <div class="layout-left">
        <custom-side />
      </div>
      <div class="layout-right">
        <div class="layout-header">
          <custom-header/>
        </div>
        <div class="layout-body">
          <router-view/>
        </div>
      </div>
    </div>
</template>
<script>
import CustomSide from "@/components/layout/CustomSide.vue";
import CustomHeader from "@/components/layout/CustomHeader.vue";

export default {
  name: 'WelcomePage',
  components: {CustomHeader, CustomSide}
}
</script>
<style scoped lang="less">
.layout-container{
  height: 100%;
  display: flex;
  flex-direction: row;
  .layout-left{
    flex: 0 0 200px;
    background: #304156;
  }
  .layout-right{
    flex: 0 0 calc(100% - 200px);
    height: 100%;
    overflow: auto;
    .layout-header{
      height: 50px;
      overflow: hidden;
      position: relative;
      background: #fff;
      box-shadow: 0 1px 4px #00152914;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 40px;
    }
    .layout-body{
      padding: 20px;
      overflow-y: auto;
    }
  }
}
</style>
